<!--动态表单项-->
<!--参考链接：https://blog.csdn.net/wojiaomaxiaoqi/article/details/81632721-->
<template>
  <el-form-item :label="item.label" :prop="item.key">
    <!--普通输入框-->
    <el-input
      v-if="item.type === 'input'"
      v-bind="$attrs"
      v-on="$listeners"
      :type="item.subtype"
      :placeholder="item.placeholder"
      :disabled="item.disable"
      :readonly="item.readonly"
      :autosize="item.autosize"
    >
    </el-input>
    <!--下拉框-->
    <el-select
      v-else-if="item.type === 'select'"
      v-bind="$attrs"
      v-on="$listeners"
      :disabled="item.disable"
      :readonly="item.readonly"
      :filterable="item.filterable"
      :clearable="item.clearable"
    >
      <el-option
        v-for="o in item.options"
        :key="o.value"
        :label="o.label"
        :value="o.value"
        :disabled="o.disabled">
      </el-option>
    </el-select>
    <!--下拉框多选框-->
    <el-select
      v-else-if="item.type === 'mselect'"
      v-bind="$attrs"
      v-on="$listeners"
      :disabled="item.disable"
      :readonly="item.readonly"
      :filterable="item.filterable"
      :clearable="item.clearable"
      :multiple="item.multiple"
      :multiple-limit="item['multiple-limit']"
    >
      <el-option
        v-for="o in item.options"
        :key="o.value"
        :label="o.label"
        :value="o.value"
        :disabled="o.disabled">
      </el-option>
    </el-select>
    <!--时间框-->
    <el-date-picker
      v-else-if="item.type === 'date'"
      v-bind="$attrs"
      v-on="$listeners"
      value-format="yyyyMMdd"
      :disabled="item.disable"
      :readonly="item.readonly"
    ></el-date-picker>
    <span v-else>未知控件类型</span>
  </el-form-item>
</template>

<script>
  export default {
    name: 'DynamicFormItem',
    props: {
      item: {
        type: Object,
        required: true
      }
    }
  }
</script>

<style scoped>
</style>
